const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');


const g = svg.append('g')
  .attr('transform',`translate(${width/2}, ${height/2})`);

const circle = g.append('circle')
   .attr('r', height/2)
   .attr('fill', 'yellow')
   .attr('stroke', 'black');

const eyeRadius = 40;
const eyeSpacing = 100;
const eyeOffset = -70;
const eyebrowWidth = 80;
const eyebrowHeight = 15;

const eyeGroup = g.append('g')
  .attr('transform',`translate(0, ${eyeOffset})`);
  
const leftEye = eyeGroup.append('circle')
  .attr('r', eyeRadius)
  .attr('cx', -eyeSpacing);

const rightEye = eyeGroup.append('circle')
  .attr('r', eyeRadius)
  .attr('cx', eyeSpacing);


const eyeBrowGroup = eyeGroup.append('g')
  .attr('transform',`translate(0, ${eyeOffset})`);
  
eyeBrowGroup
  .transition().duration(2000)
  .attr('transform',`translate(0, ${eyeOffset - 50})`)
  .transition().duration(2000)
  .attr('transform',`translate(0, ${eyeOffset})`);

const leftEyebrow = eyeBrowGroup.append('rect')
  .attr('x', -eyeSpacing - eyebrowWidth/2)
  //.attr('y', eyeOffset)
  .attr('width',eyebrowWidth)
  .attr('height',eyebrowHeight);
  
const rightEyebrow = eyeBrowGroup.append('rect')
  .attr('x', eyeSpacing - eyebrowWidth/2)
  //.attr('y', eyeOffset)
  .attr('width',eyebrowWidth)
  .attr('height',eyebrowHeight);

  
const mouth = g.append('path')
  .attr('d', d3.arc()({
    innerRadius: 150,
	outerRadius: 170,
	startAngle: Math.PI / 2,
	endAngle: Math.PI * 1.5
  }));